<template>
  <div class="purse_detail">
    <div class="detail_header">
      <top-bar :barObj="barObj"/>
      <div class="icon">
        <img :src="currency[lockMoney.value1]" alt>
      </div>
      <div class="name">{{lockMoney.value1}}</div>
      <div class="num">可兑换资产</div>
      <div class="number">{{lockMoney.value2}}</div>
    </div>
    <div class="detail_content">
      <div class="title">今日兑换比例 1 : {{lockMoney.value3}} 章鱼丸</div>
      <div class="txt">兑换数量</div>
      <input type="text" v-model="val" @keydown="handleInput">
      <div class="equality">等于{{val*lockMoney.value3}}章鱼丸</div>
      <div class="btn" @click="exchange">兑换</div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { GetLock, GetDhPs } from "../../api";
import { mapGetters } from "vuex";
import { Toast } from "mint-ui";
import { getGuid } from "../../utils/index";

export default {
  name: "purseDetail",
  data() {
    return {
      val: 0,
      barObj: {
        isBack: true,
        backVal: "钱包",
        title: "转 出"
      },
      lockMoney: {}
    };
  },
  components: { topBar },
  computed: {
    ...mapGetters(["currency"])
  },
  mounted() {
    this.getLockMoney();
  },
  methods: {
    getLockMoney() {
      let id = localStorage.zyUserId;
      GetLock({
        ID: id,
        MC: this.$route.query.type
      }).then(res => {
        this.lockMoney = res.data.EntityList[0];
        // this.val = res.data.EntityList[0].value2;
      });
    },
    exchange() {
      if (this.val > this.lockMoney.value2) {
        Toast({
          message: "不能大于可兑换资产",
          duration: 2000
        });
        return;
      }
      GetDhPs({
        YJELQss: this.val,
        ID: localStorage.zyUserId,
        MC: this.$route.query.type,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.MessageID == "0") {
          this.getLockMoney();
          Toast({
            message: "兑换成功"
          });
        } else {
          Toast({
            message: res.data.Content
          });
        }
      });
    },
    handleInput(e) {
      // 通过正则过滤小数点后6位
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,4})/g)[0] || null;
    }
  }
};
</script>
<style lang="stylus" scoped>
.purse_detail {
  .detail_header {
    height: 6.39rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding-top: 0.7rem;
    color: #fff;
    text-align: center;

    .icon {
      width: 0.9rem;
      height: 0.9rem;
      margin: 30px auto 10px auto;

      img {
        width: 100%;
      }
    }

    .name {
      font-size: 27px;
    }

    .number {
      font-size: 33px;
    }

    .num {
      font-size: 16px;
      opacity: 0.7;
      margin: 20px 0;
    }
  }

  .detail_content {
    width: 7.07rem;
    height: 7.12rem;
    background: #fff;
    border-radius: 20px;
    margin: 0 auto;
    // position: absolute;
    // left: 50%;
    // padding-top: 37px;
    // transform: translateX(-50%);
    // bottom: 20px;
    position: relative;
    top: -40px;
    padding: 20px;
    box-sizing: border-box;

    .title {
      width: 100%;
      font-size: 16px;
      height: 0.6rem;
      line-height: 0.6rem;
      margin: 0px auto 60px auto;
      color: #006AEE;
      text-align: center;
    }

    .txt {
      color: #006AEE;
      font-size: 16px;
      margin: 10px auto;
      font-weight: 500;
    }

    input {
      width: 6.18rem;
      height: 0.7rem;
      line-height: 0.7rem;
      background: #E8E8E8;
      font-size: 20px;
      box-sizing: border-box;
      margin: 10px auto;
      padding: 0 20px;
      border-radius: 8px;
    }

    .equality {
      text-align: center;
      color: #616161;
      font-size: 16px;
    }

    .btn {
      width: 6.18rem;
      line-height: 1.01rem;
      margin: 50px auto 0 auto;
      color: #fff;
      background: linear-gradient(166deg, rgba(193, 107, 51, 1), rgba(255, 99, 44, 1), rgba(255, 133, 44, 1));
      box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
      border-radius: 10px;
      text-align: center;
    }
  }

  .pfooter {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>

